<script>
export default {
  name: 'CarbonNeutralityDeviationSituation',
  props: {
    pageData: {
      required: false,
      default: {}
    },
    projectList: {
      required: false,
      default: []
    }
  },
  methods: {
    getProjectName(projectId) {
      return this.projectList.find(project => project.value === projectId)?.label
    },
    getMaxName(item) {
      let name = ''
      let deviation = 0
      let rate = 0
      if (item.carbonEmissionsDeviation < item.carbonZeroDeviation) {
        name = '碳减'
        deviation = item.carbonZeroDeviation
        rate = item.carbonZeroDeviationRate
      } else {
        name = '碳排'
        deviation = item.carbonEmissionsDeviation
        rate = item.carbonEmissionsDeviationRate
      }
      if (deviation < item.carbonSequestrationDeviation) {
        name = '碳汇'
        deviation = item.carbonSequestrationDeviation
        rate = item.carbonSequestrationDeviationRate
      }
      return {
        name,
        deviation,
        rate
      }
    },
    getMaxRowByProjectAndField(projectId, field) {
      const list = this.pageData.projectData[projectId] || []
      if (list.length === 0) {
        return {}
      }
      return list.slice().sort((a, b) => b[field] - a[field])[0]
    },
    getMinRowByProjectAndField(projectId, field) {
      const list = this.pageData.projectData[projectId] || []
      if (list.length === 0) {
        return {}
      }
      return list.slice().sort((a, b) => a[field] - b[field])[0]
    }
  },
  data() {
    return {
      dataList: []
    }
  }
}
</script>

<template>
  <div>
    <div>
      <h2>4、碳中和偏差情况</h2>
      <table style="width: 80%; margin: 0 5%">
        <thead>
        <tr>
          <th>所属项目</th>
          <th>碳排偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳减偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳汇偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳中和偏差值</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in pageData.projectTotalList" :key="item.id">
          <td>{{ getProjectName(item.sceneProjectId) }}</td>
          <td>{{ item.carbonEmissionsDeviation }}</td>
          <td>{{ item.carbonEmissionsDeviationRate }}</td>
          <td>{{ item.carbonZeroDeviation }}</td>
          <td>{{ item.carbonZeroDeviationRate }}</td>
          <td>{{ item.carbonSequestrationDeviation }}</td>
          <td>{{ item.carbonSequestrationDeviationRate }}</td>
          <td>{{ item.carbonNeutralityDeviation }}</td>
        </tr>
        </tbody>
      </table>
      <div style="margin: 0 15%">
        <p v-for="item in pageData.projectTotalList">
          {{ getProjectName(item.sceneProjectId) }}在
          {{ pageData.startDate }}-{{ pageData.endDate
          }}中，从碳中和规实偏差情况分析，贡献最大的是{{ getMaxName(item).name }}，
          偏差贡献率为{{ getMaxName(item).rate }}%，偏差值为{{ getMaxName(item).deviation }} kgCO2，
          即表明碳排放偏差对{{ getProjectName(item.sceneProjectId) }}碳中和偏差情况影响程度最大。</p>
      </div>
    </div>
    <div v-for="(projectId,index) in Object.keys(pageData.projectData)" :key="projectId" class="project-item">
      <h3>4.{{ index + 1 }} {{ getProjectName(projectId) }}碳中和偏差时间情况</h3>
      <table style="width: 80%; margin: 0 5%">
        <thead>
        <tr>
          <th>数据时间</th>
          <th>碳排偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳减偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳汇偏差值（kgCO2）</th>
          <th>偏差贡献率</th>
          <th>碳中和偏差值</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in pageData.projectData[projectId]" :key="item.solidifyDate">
          <td>{{ item.solidifyDate }}</td>
          <td>{{ item.carbonEmissionsDeviation }}</td>
          <td>{{ item.carbonEmissionsDeviationRate }}</td>
          <td>{{ item.carbonZeroDeviation }}</td>
          <td>{{ item.carbonZeroDeviationRate }}</td>
          <td>{{ item.carbonSequestrationDeviation }}</td>
          <td>{{ item.carbonSequestrationDeviationRate }}</td>
          <td>{{ item.carbonNeutralityDeviation }}</td>
        </tr>
        </tbody>
      </table>
      <div style="margin: 0 5%">
        <p>通过列出时间段内的碳排放、碳汇以及相关偏差值和偏差贡献率，来分析碳中和进程中的偏差情况。
          {{ getProjectName(projectId) }}在{{ pageData.startDate }}-{{ pageData.endDate }}中，
          {{ getMaxRowByProjectAndField(projectId, 'carbonEmissionsDeviation').solidifyDate }}的碳排偏差值的最高，为{{ getMaxRowByProjectAndField(projectId, 'carbonEmissionsDeviation').carbonEmissionsDeviation }} kgCO2;
          {{ getMinRowByProjectAndField(projectId, 'carbonEmissionsDeviation').solidifyDate }}的碳排偏差值的最低，为{{ getMinRowByProjectAndField(projectId, 'carbonEmissionsDeviation').carbonEmissionsDeviation }} kgCO2。
          {{ getMaxRowByProjectAndField(projectId, 'carbonZeroDeviation').solidifyDate }}的碳减偏差值的最高，为{{ getMaxRowByProjectAndField(projectId, 'carbonZeroDeviation').carbonZeroDeviation }} kgCO2;
          {{ getMinRowByProjectAndField(projectId, 'carbonZeroDeviation').solidifyDate }}的碳减偏差值的最低，为{{ getMinRowByProjectAndField(projectId, 'carbonZeroDeviation').carbonZeroDeviation }} kgCO2。
          {{ getMaxRowByProjectAndField(projectId, 'carbonSequestrationDeviation').solidifyDate }}的碳汇偏差值的最高，为{{ getMaxRowByProjectAndField(projectId, 'carbonSequestrationDeviation').carbonSequestrationDeviation }} kgCO2;
          {{ getMinRowByProjectAndField(projectId, 'carbonSequestrationDeviation').solidifyDate }}的碳汇偏差值的最低，为{{ getMinRowByProjectAndField(projectId, 'carbonSequestrationDeviation').carbonSequestrationDeviation }} kgCO2。
          {{ getMaxRowByProjectAndField(projectId, 'carbonSequestrationDeviationRate').solidifyDate }}的碳中和偏差值的最高，为{{ getMaxRowByProjectAndField(projectId, 'carbonSequestrationDeviationRate').carbonSequestrationDeviationRate }} kgCO2;
          {{ getMinRowByProjectAndField(projectId, 'carbonSequestrationDeviationRate').solidifyDate }}的碳中和偏差值的最低，为{{ getMinRowByProjectAndField(projectId, 'carbonSequestrationDeviationRate').carbonSequestrationDeviationRate }} kgCO2。</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 80%;
  margin: 0 10%;
  font-size: 16px;
  font-weight: 500;

  th {
    border: 1px solid rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
    background-color: #029590;
    text-align: center;
  }

  td {
    border: 1px solid #000000;
    padding: 6px 10px;
    text-align: center;
  }
}

.project-item {
  margin: 0 5%;

}

p {
  text-indent: 2em;
  line-height: 24px;
}
</style>
